<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { CircleUser, Menu, Package2 } from "lucide-vue-next";
import { Button } from "@/components/ui/button";

const route = useRoute()
// 在组件挂载时输出路由路径
onMounted(() => {
  console.log('Current route path:', route.path)
})
</script>

<template>
  <header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
    <nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
      <a href="#" class="flex items-center gap-2 text-lg font-semibold md:text-base">
        <Package2 class="h-6 w-6" />
        <span class="sr-only">Acme Inc</span>
      </a>
      <a href="/" class="transition-colors hover:text-primary" :class="{
        'font-bold text-primary':
          $route.path === '/account',
        'hover:bg-blue-100':
          $route.path !== '/account',
      }">
        首页
      </a>
      <a href="/account/information" class="transition-colors hover:text-primary" :class="{
        'font-bold text-primary':
          $route.path.indexOf('/account/information') !== -1,
        'hover:bg-blue-100':
          $route.path.indexOf('/account/information') === -1,
      }">
        账户信息
      </a>
      <a href="/account/security" class="transition-colors hover:text-primary" :class="{
        'font-bold text-primary':
          $route.path.indexOf('/account/security') !== -1,
        'hover:bg-blue-100':
          $route.path.indexOf('/account/security') === -1,
      }">
        账户安全
      </a>     
    </nav>
    <Sheet>
      <SheetTrigger as-child>
        <Button variant="outline" size="icon" class="shrink-0 md:hidden">
          <Menu class="h-5 w-5" />
          <span class="sr-only">导航菜单</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left">
        <nav class="grid gap-6 text-lg font-medium">
          <a href="#" class="flex items-center gap-2 text-lg font-semibold">
            <Package2 class="h-6 w-6" />
            <span class="sr-only">Company</span>
          </a>
          <a href="/" class="text-muted-foreground hover:text-foreground">
            首页
          </a>
          <a href="/account/information" class="text-muted-foreground hover:text-foreground">
            账户信息
          </a>
          <a href="/account/security" class="text-muted-foreground hover:text-foreground">
            账户安全
          </a>
        </nav>
      </SheetContent>
    </Sheet>
    <div class="flex items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">    
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button variant="secondary" size="icon" class="rounded-full">
            <CircleUser class="h-5 w-5" />
            <span class="sr-only">用户菜单</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuLabel>我的账户</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>账号申诉</DropdownMenuItem>
          <DropdownMenuItem>账号注销</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>退出</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  </header>
</template>
